/**
 * Created by mapbar_front on 2019/8/1.
 */
import React,{Component} from 'react';

const themes = {
    light: {
        background: '#f99',
    },
    dark: {
        background: '#9ff',
    }
}
const ThemeContext = React.createContext({
    theme: themes.dark,
    toggleTheme: ()=>{}
})

function Content(){
    return(
        <div>
            <ThemeToggleButton/>
        </div>
    )
}
function ThemeToggleButton(){
    return(
        <ThemeContext.Consumer>
            {
                ({theme,toggleTheme})=>(
                    <button
                        onClick={ toggleTheme }
                        style={{ backgroundColor:theme.background }}
                    >
                        btn
                    </button>
                )
            }
        </ThemeContext.Consumer>
    )
}
class Context2 extends Component{
    constructor(props){
        super(props);
        this.state = {
            theme: themes.light,
            toggleTheme: this.toggleTheme,
        }
    }
    toggleTheme=()=>{
        this.setState(state=>({
            theme: state.theme === themes.dark?themes.light:themes.dark
        }))
    }
    render(){
        return(
            <div>
                <ThemeContext.Provider value={this.state}>
                    <Content />
                </ThemeContext.Provider>
            </div>
        )

    }
}
export default Context2;
